<template>
  <div>
    <myheader></myheader>
    <section class="featured-block text-center">
      <div class="container">
        <div>
          <Breadcrumb :datas="datas"></Breadcrumb>
        </div>
      </div>
    </section>

    <table>
      <tr>
        <td>商品分类：</td>
        <td>
           <Select v-model="selected" :datas='category'></Select>
        </td>
      </tr>
      <tr>
        <td>商品名称：</td>
        <td>
          <input type="text" v-model="name" placeholder="请输入商品名称"/>
        </td>
      </tr>
      <tr>
        <td>商品价格：</td>
        <td>
          <input type="number" v-model="price"/>
        </td>
      </tr>
      <tr>	
        <td>
          颜色：
        </td>
        <td>
          <input type="text" v-model="color"/>
        </td>
    </tr>
      <tr>	
        <td>
          尺码：
        </td>
        <td>
          <input type="text" v-model="size"/>
        </td>
    </tr>
      <tr>	
        <td>
          季节：
        </td>
        <td>
          <input type="text" v-model="season"/>
        </td>
    </tr>
      <tr>	
        <td>
          详情图片：
        </td>
        <td>
          <input type="file" @change="add_infoimgs"/>
          <ul>
              <li v-show="info_imgs" v-for="i in info_imgs">{{i.name}}</li>
          </ul>
        </td>
    </tr>
    <tr>
      <td colspan="2" align='center'><Button color='blue' @click="submit">添加商品</Button></td>

    </tr>
    </table>
    <footer class="footer">
      <div class="container">@v3u.cn</div>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
import myheader from "./myheader.vue";
// 导入文件
import {config, formatXml} from '../config.js'
export default {
  data() {
    return {
      info_imgs:[],
      selected:0,
      //商品分类
      category:[],
      name:'',
      price:0,
      color:"",
      size:'',
      season:'',
      //面包屑导航变量
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "添加商品", route: { name: "addgoods" } }
      ]
    };
  },
  // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader
  },
  created() {},
  mounted: function() { 
    this.get_cagetory()
  },
  methods: {
    //存储详情图片
    add_infoimgs(e){
      let file = e.target.files[0];
      this.info_imgs.push({
        name:file.name,
        file:file
      })
      console.log(this.info_imgs)
    },
    //获取分类
    get_cagetory(){
      this.axios.get("http://127.0.0.1:8000/myapp/categorylist/").then(res=>{
        var mycate=[]
        //二次处理
        for(let i=0;i<res.data.length;i++){
          mycate.push({title:res.data[i].name,key:res.data[i].id})
        }
        this.category=mycate
      })
    },
    //添加商品
    submit(){
      //将普通字段 转换为json
      var param = {}
      param['color']=this.color
      param['size']=this.size
      param['season']=this.season
      //转换为json字符串
      param = JSON.stringify(param)

      var formdata=new FormData();
      formdata.append("name",this.name)
      formdata.append("price",this.price)
      formdata.append("params",param)
      formdata.append("cid",this.selected)

      //批量封装详情图片 fromdata
      for(let i=0;i<this.info_imgs.length;i++){
        let file = this.info_imgs[i].file
        formdata.append(file.name, file, file.name)
        //添加图片名称数组
        formdata.append("imgs_name",file.name)
      }
      let config = { headers: { "Content-Type": "multipart/form-data" } };
      this.axios.post("http://127.0.0.1:8000/myapp/insertgoods/",formdata,config).then(res=>{
        console.log(res.data)
        if(res.code==200){
          this.$Message(result.data.msg);
        }
      })
    }
  }
};
</script>
 
<style>
.td {
  padding: 10px;
}
table {
  margin: 0 auto;
  border-collapse:separate; 
  border-spacing:20px;
}
.code {
  cursor: pointer;
}
.upload {
  margin: 100px auto;
  width: 300px;
  height: 150px;
  border: 2px dashed #f00;
  padding-top: 50px;
  padding-left: 80px;
}
</style>